<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 360px;
            height: 500px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text" placeholder="姓名" id="box1" value="">
    <input type="text" placeholder="年龄" class="box2" value="">
    <input type="text" placeholder="学历" name="box3" value="">
    <input type="text" placeholder="专业" value="">
    <button>保存</button>
</div>
    <script>
        // 1, 实现一个个人信息页面   姓名  年龄  学历  专业, 
        // 可以获取到输入的信息, 点击保存按钮以后, 
        // 输出信息(信息显示形式: 姓名:张三,年龄:33,学历:本科,专业:计算机)
        // 要求: 分别使用通过id, tagName, name三种获取节点的方式实现
        var oBox1=document.getElementById("box1");
        var oBox2=document.getElementsByClassName("box2")[0];
        var oBox3=document.getElementsByName("box3")[0];
        var oBox4=document.getElementsByTagName("input")[3];
        var oBtn=document.querySelector("button");

        oBtn.onclick=function(){
            var str1=oBox1.value;
            var str2=oBox2.value;
            var str3=oBox3.value;
            var str4=oBox4.value;

            var res="姓名:"+str1+" "+"年龄:"+str2+" "+"学历:"+str3+" "+"专业:"+str4;
            document.write(res);
        }
    </script>
</body>
</html>